CSS டெக்ஸ்ட் டெக்கரேஷன் பெயிண்ட் ஆர்டர்: டெக்கரேஷன் லேயர் ஸ்டேக்கிங்கில் தேர்ச்சி பெறுதல்

CSS, உரையை வடிவமைக்க பலவிதமான பண்புகளை வழங்குகிறது, இது டெவலப்பர்களை பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் அணுகக்கூடிய உள்ளடக்கத்தை உருவாக்க அனுமதிக்கிறது. இந்த பண்புகளில், text-decoration-skip-ink மற்றும் text-decoration-paint-order ஆகியவை டெக்ஸ்ட் டெக்கரேஷன்களின் ரெண்டரிங் மீது நுணுக்கமான கட்டுப்பாட்டை வழங்குகின்றன, இது வடிவமைப்பாளர்களை அடிக்கோடுகள், மேல்கோடுகள் மற்றும் நடுக்கோடுகளின் தோற்றத்தை நேர்த்தியாக சரிசெய்ய உதவுகிறது.

டெக்ஸ்ட் டெக்கரேஷன்களைப் புரிந்துகொள்ளுதல்

டெக்ஸ்ட் டெக்கரேஷன்கள் என்பது உரைக்கு பயன்படுத்தப்படும் காட்சி விளைவுகள், பொதுவாக ஹைப்பர்லிங்க்களுக்காக அல்லது குறிப்பிட்ட உரை நடைகளைக் குறிக்கப் பயன்படுத்தப்படுகின்றன. மிகவும் பொதுவான டெக்ஸ்ட் டெக்கரேஷன்கள் பின்வருமாறு:

• Underline (அடிக்கோடு): உரையின் கீழ் வரையப்படும் கோடு.
• Overline (மேல்கோடு): உரையின் மேல் வரையப்படும் கோடு.
• Line-through (நடுக்கோடு): உரையின் வழியாக வரையப்படும் கோடு (ஸ்ட்ரைக்த்ரூ என்றும் அழைக்கப்படுகிறது).

CSS, இந்த டெக்கரேஷன்களைத் தனிப்பயனாக்க text-decoration-line, text-decoration-color, மற்றும் text-decoration-style போன்ற பண்புகளை வழங்குகிறது. இருப்பினும், சில சமயங்களில் இந்த டெக்கரேஷன்களின் இயல்புநிலை ரெண்டரிங் உரையுடன் முரண்படலாம், குறிப்பாக டிசெண்டர்கள் அல்லது சிக்கலான எழுத்துரு வடிவமைப்புகளைக் கையாளும்போது. இங்குதான் text-decoration-skip-ink மற்றும் text-decoration-paint-order ஆகியவை devreக்கு வருகின்றன.

text-decoration-skip-ink பண்பு

text-decoration-skip-ink பண்பு, டெக்ஸ்ட் டெக்கரேஷன்கள் கிளிஃப் டிசெண்டர்களை (எழுத்துக்களின் அடிப்படை கோட்டிற்கு கீழே நீட்டிக்கப்படும் பகுதிகள்) கடந்து செல்ல வேண்டுமா என்பதைக் கட்டுப்படுத்துகிறது. இது அடிக்கோடுகளுக்கு குறிப்பாக பயனுள்ளதாக இருக்கும், ஏனெனில் இது அடிக்கோடு 'g', 'j', 'p', 'q', மற்றும் 'y' போன்ற எழுத்துக்களுடன் ஒன்றுடன் ஒன்று சேர்வதைத் தடுக்கிறது.

text-decoration-skip-ink க்கான மதிப்புகள்

• auto: மை மீது கடந்து செல்ல வேண்டுமா என்பதை உலாவி தீர்மானிக்கிறது. இது இயல்புநிலை மதிப்பு, மற்றும் நடத்தை உலாவி மற்றும் எழுத்துருவைப் பொறுத்து மாறுபடலாம்.
• none: டெக்ஸ்ட் டெக்கரேஷன் கிளிஃப் டிசெண்டர்களைக் கடந்து செல்லாது.
• all: டெக்ஸ்ட் டெக்கரேஷன் அனைத்து கிளிஃப் டிசெண்டர்களையும் கடந்து செல்லும்.

உதாரணம்

பின்வரும் CSS-ஐக் கவனியுங்கள்:

            .underline {
 text-decoration: underline;
 text-decoration-skip-ink: auto;
}

.underline-no-skip {
 text-decoration: underline;
 text-decoration-skip-ink: none;
}

            

              
                Copy
              
            
          

உரைக்கு .underline வகுப்பைப் பயன்படுத்துவது பெரும்பாலும் அடிக்கோடு டிசெண்டர்களைக் கடந்து செல்வதில் விளைவிக்கும், அதே நேரத்தில் .underline-no-skip வகுப்பைப் பயன்படுத்துவது அடிக்கோடு டிசெண்டர்களுடன் வெட்டுவதற்கு காரணமாகும்.

சர்வதேசப் பரிசீலனை: வெவ்வேறு மொழிகள் மாறுபட்ட கிளிஃப் அமைப்புகளைக் கொண்டுள்ளன. உதாரணமாக, டயக்ரிடிக்ஸ் கொண்ட மொழிகள் (பிரெஞ்சு அல்லது வியட்நாமிய மொழி போன்றவை) அல்லது லத்தீன் அல்லாத எழுத்துருக்கள் (அரபு அல்லது சீன மொழி போன்றவை) text-decoration-skip-ink-இலிருந்து பயனடையலாம், இது டெக்கரேஷன்கள் எழுத்துக்களின் முக்கிய பகுதிகளை மறைக்காமல் இருப்பதை உறுதி செய்கிறது.

text-decoration-paint-order பண்பு

text-decoration-paint-order பண்பு, உரை, அதன் முன்புற நிறம், மற்றும் அதன் டெக்கரேஷன்கள் (அடிக்கோடு, மேல்கோடு, நடுக்கோடு) ஆகியவற்றின் பெயிண்டிங் வரிசையைக் கட்டுப்படுத்துகிறது. இது உரை டெக்கரேஷனுக்கு மேலே அல்லது அதன் பின்னால் வரையப்பட வேண்டுமா என்பதை நீங்கள் குறிப்பிட அனுமதிக்கிறது.

பெயிண்ட் ஆர்டரைப் புரிந்துகொள்ளுதல்

பெயிண்ட் ஆர்டர், உரை மற்றும் அதன் டெக்கரேஷன்களின் அடுக்கு சூழலைத் தீர்மானிக்கிறது. இயல்பாக, உலாவி வழக்கமாக டெக்கரேஷனை உரையின் *கீழ்* வரைகிறது, அதாவது உரை கடைசியாக பெயிண்ட் செய்யப்பட்டு மேலே தோன்றும். இருப்பினும், சில வடிவமைப்பு சூழ்நிலைகளில், நீங்கள் டெக்கரேஷனை உரையின் *மேல்* தோன்றும்படி விரும்பலாம், இது ஒரு ভিন্নமான காட்சி விளைவை உருவாக்குகிறது.

text-decoration-paint-order க்கான மதிப்புகள்

text-decoration-paint-order பண்பு பின்வரும் முக்கிய வார்த்தைகளை ஏற்றுக்கொள்கிறது, இது வெவ்வேறு கூறுகள் பெயிண்ட் செய்யப்படும் வரிசையைக் குறிப்பிடுகிறது:

• normal: இது இயல்புநிலை மதிப்பு. பெயிண்ட் ஆர்டர் உலாவியால் தீர்மானிக்கப்படுகிறது, மற்றும் பொதுவாக உரை கடைசியாக (மேலே) பெயிண்ட் செய்யப்படுகிறது.
• fill: உரையின் முன்புற நிறத்தைக் குறிக்கிறது.
• stroke: உரையின் அவுட்லைனைக் (இருந்தால்) குறிக்கிறது.
• text: உரையையே குறிக்கிறது.
• markers: பட்டியல் குறிப்பான்களை (புல்லட்டுகள், எண்கள்) குறிக்கிறது.

நீங்கள் இந்த முக்கிய வார்த்தைகளின் விரும்பிய வரிசையைக் குறிப்பிடுகிறீர்கள். டெக்ஸ்ட் டெக்கரேஷன்களுக்கு, தொடர்புடைய முக்கிய வார்த்தை மறைமுகமாகக் கையாளப்படுகிறது; நீங்கள் "decoration" போன்ற ஒரு முக்கிய வார்த்தையை வெளிப்படையாகச் சேர்க்கத் தேவையில்லை.

text-decoration-paint-order பயன்படுத்தும்போது, நீங்கள் உரை உறுப்பின் வெவ்வேறு பகுதிகளை எந்த வரிசையில் வரைய வேண்டும் என்பதை உலாவிக்கு திறம்படக் கூறுகிறீர்கள். fill, stroke, மற்றும் text மதிப்புகள் பெயிண்ட் ஆர்டரை பாதிக்கின்றன, மற்றும் டெக்ஸ்ட் டெக்கரேஷன்கள் எப்போதும் இந்த வரிசையை மதிக்கும் வகையில் ரெண்டர் செய்யப்படுகின்றன. பொதுவாக, டெக்ஸ்ட் டெக்கரேஷன்கள் மற்ற முக்கிய வார்த்தைகளின் வரிசையின் அடிப்படையில் உரைக்கு முன்னரோ அல்லது பின்னரோ வரையப்படுகின்றன.

பொதுவான பயன்பாட்டு வழக்குகள்

1. ஒரு "கட்அவுட்" விளைவை உருவாக்குதல்: fill முக்கிய வார்த்தையை text முக்கிய வார்த்தைக்கு முன் வைப்பதன் மூலம், உரை டெக்கரேஷனில் இருந்து "வெட்டப்பட்டது" போல் தோன்றும் ஒரு காட்சி விளைவை நீங்கள் உருவாக்கலாம். டெக்கரேஷன் பின்னர் உரையை மூடிவிடும்.
2. உரை வாசிப்புத்திறனை உறுதி செய்தல்: டெக்ஸ்ட் டெக்கரேஷன் நிறம் உரை நிறத்தைப் போலவே இருக்கும் சூழ்நிலைகளில், டெக்கரேஷனுக்கு *பிறகு* உரையை பெயிண்ட் செய்வதன் மூலம் உரை வாசிக்கக்கூடியதாக இருப்பதை நீங்கள் உறுதி செய்யலாம்.
3. ஸ்டைலான ஹைப்பர்லிங்குகள்: மிகவும் பார்வைக்கு ஈர்க்கக்கூடிய ஹைப்பர்லிங்குகளுக்கு, தனித்துவமான மற்றும் கண்ணைக் கவரும் விளைவுகளை உருவாக்க வெவ்வேறு பெயிண்ட் ஆர்டர்களுடன் நீங்கள் பரிசோதனை செய்யலாம்.

உதாரணங்கள்

உதாரணம் 1: இயல்புநிலை பெயிண்ட் ஆர்டர் (normal)

இது நிலையான நடத்தை. உரை அடிக்கோட்டின் மேல் ரெண்டர் செய்யப்படுகிறது.

            .default-underline {
 text-decoration: underline;
 text-decoration-color: red;
 text-decoration-paint-order: normal;
}

            

              
                Copy
              
            
          

உதாரணம் 2: உரையின் மேல் அடிக்கோடு ("கட்அவுட்" விளைவைப் பின்பற்றுதல்)

இதை அடைய, நாம் fill வரிசையைக் கையாளுவதன் மூலம் அடிக்கோட்டை உரையின் மேல் தோன்றும் வகையில் திறம்படச் செய்ய வேண்டும்:

            .underline-on-top {
 text-decoration: underline;
 text-decoration-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
 color: black; /* Text Color */
 text-decoration-paint-order: fill;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், fill மட்டுமே குறிப்பிடப்பட்டுள்ளதால், மறைமுகமான ரெண்டரிங் செயல்முறை அடிக்கோட்டை முதலில் வைக்கலாம், அதைத் தொடர்ந்து உரைக்கு பயன்படுத்தப்படும் நிறப் பண்பால் குறிப்பிடப்பட்ட எந்த நிரப்புகளும். உரை நிறம் திடமாக இருந்தால் (எ.கா., கருப்பு), அது அடிக்கோட்டை மறைக்கக்கூடும், எனவே வெளிப்படைத்தன்மை முக்கியமானது.

உதாரணம் 3: அதிக பண்புகளுடன் தனிப்பயன் அடுக்கு (சிக்கலான எடுத்துக்காட்டு)

            .custom-paint-order {
 text-decoration: underline;
 text-decoration-color: blue;
 color: white;
 -webkit-text-stroke: 1px black; /* For Safari */
 text-stroke: 1px black;
 text-decoration-paint-order: stroke fill text;
}

            

              
                Copy
              
            
          

இங்கே, உரைக்கு ஒரு கருப்பு ஸ்ட்ரோக் இருக்கும், பின்னர் நிரப்பு (வெள்ளை), மற்றும் இறுதியாக அசல் உரை, அடிக்கோட்டை ஸ்ட்ரோக் மற்றும் நிரப்புக்கு *பின்னால்* வைக்கும். இது text-stroke பண்புகளை வெளிப்படையாகக் கொண்டிருக்க வேண்டும், இது ஒரு விரிவான பெயிண்ட் ஆர்டரை நிரூபிக்க, குறிப்பாக text-stroke-ஐ ஆதரிக்கும் உலாவிகளில் கவனிக்கத்தக்கது.

உலாவி இணக்கத்தன்மை

text-decoration-paint-order க்கான உலாவி ஆதரவு நவீன உலாவிகளில் நன்றாக உள்ளது. இருப்பினும், உங்கள் இலக்கு பார்வையாளர்களுக்கு போதுமான ஆதரவு இருப்பதை உறுதிசெய்ய, பொருந்தக்கூடிய அட்டவணைகளை (caniuse.com இல் உள்ளவை போன்றவை) சரிபார்ப்பது அவசியம், குறிப்பாக நீங்கள் பழைய உலாவிகளை இலக்காகக் கொண்டிருந்தால்.

அணுகல்தன்மை பரிசீலனைகள்

டெக்ஸ்ட் டெக்கரேஷன்களைப் பயன்படுத்தும்போது, அணுகல்தன்மையைக் கருத்தில் கொள்வது மிகவும் முக்கியம். முக்கியமான தகவல்களைத் தெரிவிக்க டெக்ஸ்ட் டெக்கரேஷன்களை மட்டுமே நம்புவதைத் தவிர்க்கவும், ஏனெனில் பார்வைக் குறைபாடு உள்ள பயனர்களால் அவற்றைப் பார்க்க முடியாமல் போகலாம். எல்லா பயனர்களும் உள்ளடக்கத்தை அணுகுவதை உறுதிசெய்ய, ARIA பண்புகள் அல்லது விளக்க உரை போன்ற மாற்று குறிப்புகளை எப்போதும் வழங்கவும்.

• நிற வேறுபாடு: உரை, டெக்ஸ்ட் டெக்கரேஷன், மற்றும் பின்னணிக்கு இடையே போதுமான நிற வேறுபாடு இருப்பதை உறுதி செய்யவும். WCAG வழிகாட்டுதல்கள் குறிப்பிட்ட வேறுபாடு விகிதத் தேவைகளை வழங்குகின்றன.
• அடிக்கோடு மாற்றுகள்: ஹைப்பர்லிங்குகளுக்கு, அடிக்கோடுகளுடன் கூடுதலாக மற்ற காட்சி குறிப்புகளையும் பயன்படுத்துவதைக் கருத்தில் கொள்ளவும், அதாவது வெவ்வேறு எழுத்துரு எடைகள் அல்லது ஐகான்கள், அவற்றை எளிதில் அடையாளம் காணும்படி செய்ய.

உலகளாவிய உதாரணம்: பன்மொழி வலைத்தளங்களுக்கு வடிவமைப்பு செய்யும்போது, வெவ்வேறு ஸ்கிரிப்டுகள் மற்றும் எழுத்துருத் தொகுப்புகள் டெக்ஸ்ட் டெக்கரேஷன்களுடன் எவ்வாறு தொடர்பு கொள்கின்றன என்பதை மனதில் கொள்ளுங்கள். உங்கள் வடிவமைப்புகளை பல்வேறு மொழிகளில் முழுமையாகச் சோதிக்கவும், டெக்கரேஷன்கள் வாசிக்கக்கூடியவையாகவும், முக்கியமான எழுத்துக்களை மறைக்காமலும் இருப்பதை உறுதிசெய்யவும்.

நடைமுறை பயன்பாடுகள் மற்றும் எடுத்துக்காட்டுகள்

1. ஹைப்பர்லிங்க் ஸ்டைல்களை மேம்படுத்துதல்

பாரம்பரியமாக, ஹைப்பர்லிங்குகள் அடிக்கோடுகளுடன் வடிவமைக்கப்படுகின்றன. text-decoration-skip-ink மற்றும் text-decoration-paint-order ஐப் பயன்படுத்துவதன் மூலம், நீங்கள் மிகவும் நுட்பமான மற்றும் பார்வைக்கு ஈர்க்கக்கூடிய ஹைப்பர்லிங்க் ஸ்டைல்களை உருவாக்கலாம். உதாரணமாக, நீங்கள் டிசெண்டர்களைக் கடந்து செல்லும் மற்றும் உரையின் பின்னால் வரையப்பட்டதாகத் தோன்றும் ஒரு டேஷ்டு அடிக்கோட்டை உருவாக்கலாம்.

            a {
 color: blue;
 text-decoration: underline dashed;
 text-decoration-color: rgba(0, 0, 255, 0.5);
 text-decoration-skip-ink: auto;
 text-decoration-paint-order: fill;
}

            

              
                Copy
              
            
          

2. உரையை முன்னிலைப்படுத்துதல்

ஒரு உரைத் தொகுதிக்குள் குறிப்பிட்ட சொற்கள் அல்லது சொற்றொடர்களை முன்னிலைப்படுத்த நீங்கள் டெக்ஸ்ட் டெக்கரேஷன்களைப் பயன்படுத்தலாம். அடிக்கோடுகள், மேல்கோடுகள், மற்றும் நடுக்கோடுகளை வெவ்வேறு நிறங்கள் மற்றும் ஸ்டைல்களுடன் இணைப்பதன் மூலம், நீங்கள் முக்கிய தகவல்களுக்கு கவனத்தை ஈர்க்கலாம்.

            .highlight {
 text-decoration: underline wavy;
 text-decoration-color: yellow;
}

            

              
                Copy
              
            
          

3. ஸ்ட்ரைக்த்ரூ விளைவுகளை உருவாக்குதல்

ஸ்ட்ரைக்த்ரூ உரை பெரும்பாலும் நீக்கப்பட்ட அல்லது காலாவதியான தகவல்களைக் குறிக்கப் பயன்படுத்தப்படுகிறது. text-decoration-line: line-through ஐப் பயன்படுத்துவதன் மூலம், நீங்கள் இந்த விளைவை எளிதாக உருவாக்கலாம். கோட்டின் நிறம், ஸ்டைல், மற்றும் தடிமனை சரிசெய்வதன் மூலம் நீங்கள் ஸ்ட்ரைக்த்ரூவை மேலும் தனிப்பயனாக்கலாம்.

            .strikethrough {
 text-decoration: line-through;
 text-decoration-color: red;
 text-decoration-style: double;
}

            

              
                Copy
              
            
          

முடிவுரை

text-decoration-skip-ink மற்றும் text-decoration-paint-order பண்புகள் CSS இல் டெக்ஸ்ட் டெக்கரேஷன்களின் ரெண்டரிங்கைக் கட்டுப்படுத்த சக்திவாய்ந்த கருவிகளை வழங்குகின்றன. இந்த பண்புகள் எவ்வாறு செயல்படுகின்றன என்பதைப் புரிந்துகொண்டு, வெவ்வேறு மதிப்புகளுடன் பரிசோதனை செய்வதன் மூலம், ஒட்டுமொத்த பயனர் அனுபவத்தை மேம்படுத்தும் பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் அணுகக்கூடிய உரை ஸ்டைல்களை நீங்கள் உருவாக்கலாம். அணுகல்தன்மை வழிகாட்டுதல்களைக் கருத்தில் கொள்ளவும், உங்கள் வடிவமைப்புகளை பல்வேறு உலாவிகள் மற்றும் சாதனங்களில் சோதித்து சீரான ரெண்டரிங்கை உறுதிசெய்யவும் நினைவில் கொள்ளுங்கள்.

இந்தப் பண்புகளில் தேர்ச்சி பெறுவது, எந்தவொரு வலைத்தளம் அல்லது பயன்பாட்டிற்கும் ஒரு மெருகூட்டப்பட்ட மற்றும் தொழில்முறை அழகியலுக்கு பங்களிக்கும், மிகவும் துல்லியமான மற்றும் நோக்கமுள்ள அச்சுக்கலை வடிவமைப்பை அனுமதிக்கிறது. வலை வடிவமைப்பு தொடர்ந்து வளர்ச்சியடைந்து வருவதால், CSS-இன் இந்த நுணுக்கமான விவரங்களைப் புரிந்துகொள்வது, உலகளாவிய பார்வையாளர்கள் முழுவதும் விதிவிலக்கான பயனர் அனுபவங்களை உருவாக்குவதற்கு பெருகிய முறையில் முக்கியத்துவம் பெறும்.